<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="X-UA-Compatible" content="IE=edge"><meta name="baidu-site-verification" content="1EB8XoOl0C"><meta name="google-site-verification" content="K7thEgdLm0UfRWJ5MGdF7sCcjClSzAlxFLPv2Oz5CGM"><title> Flutter基础 · 页面仔小杨</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Flutter基础 - 页面仔小杨"><meta name="keywords" content="flutter dart"><meta name="author" content="页面仔小杨"><link rel="short icon" href="/images/favicon.ico"><link rel="stylesheet" href="/css/bubuzou.css"><link rel="search" type="application/opensearchdescription+xml" href="http://itxing666.gitee.io/atom.xml" title="页面仔小杨"><script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script><meta name="generator" content="Hexo 4.2.0"><link rel="alternate" href="/atom.xml" title="页面仔小杨" type="application/atom+xml">
</head><body><header><div class="header row"> <a href="/" class="logo-link"><img src="/images/logo.png"></a><ul id="nav_list" class="nav nav-list"><li class="nav-list-item"><a href="/" target="_self" data-hover="博文" class="nav-list-link">博文</a></li><li class="nav-list-item"><a href="/archives/" target="_self" data-hover="归档" class="nav-list-link">归档</a></li><li class="nav-list-item"><a href="/about/" target="_self" data-hover="关于" class="nav-list-link">关于</a></li></ul><div class="search"><a id="search_btn" href="#search"></a></div><div id="nav_btn" class="nav-btn"><span></span><span></span><span></span></div></div></header><div class="row scroll-con"><section class="container"><!-- for archive page--><div id="postAr" class="post"><article class="post-block"><h1 class="post-title">Flutter基础</h1><div class="post-info">2021-01-18</div><div class="post-content"><p><img src="https://raw.githubusercontent.com/itxing666/blogImgs/main/img/196.png" alt="196"></p>
<h2 id="Flutter环境搭建"><a href="#Flutter环境搭建" class="headerlink" title="Flutter环境搭建"></a>Flutter环境搭建</h2><p><a href="https://flutterchina.club/setup-macos/" target="_blank" rel="noopener">mac环境搭建</a></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">flutter doctor</span><br></pre></td></tr></table></figure>

<p><img src="https://raw.githubusercontent.com/itxing666/blogImgs/main/img/206.png" alt="206"></p>
<h3 id="创建项目"><a href="#创建项目" class="headerlink" title="创建项目"></a>创建项目</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">flutter create myapp</span><br><span class="line">cd myapp</span><br><span class="line">flutter devices &#x2F;&#x2F; 查看开启的模拟器和连接的真机</span><br><span class="line">flutter run -d xxxxxxxx</span><br><span class="line">&#x2F;&#x2F; 或</span><br><span class="line">flutter run</span><br></pre></td></tr></table></figure>

<p>或</p>
<h3 id="运行"><a href="#运行" class="headerlink" title="运行"></a>运行</h3><ol>
<li>确保在VS Code的右下角选择了目标设备</li>
<li>按 F5 键或调用<strong>Debug&gt;Start Debugging</strong></li>
<li>等待应用程序启动</li>
<li>如果一切正常，在应用程序建成功后，您应该在您的设备或模拟器上看到应用程序:<br><img src="https://flutterchina.club/images/flutter-starter-app-android.png" alt="Starter App on Android"></li>
</ol>
<h3 id="热重载"><a href="#热重载" class="headerlink" title="热重载"></a>热重载</h3><ul>
<li>开发工具启动，修改代码后<code>cmd-s</code></li>
<li>终端启动，输入<code>r</code></li>
</ul>
<h2 id="Hello-World"><a href="#Hello-World" class="headerlink" title="Hello World"></a>Hello World</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">'package:flutter/material.dart'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">void</span> main() &#123;</span><br><span class="line">  runApp(MyApp());</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyApp</span> <span class="keyword">extends</span> <span class="title">StatelessWidget</span> </span>&#123;</span><br><span class="line">  @override</span><br><span class="line">  Widget build(BuildContext context) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> MaterialApp(</span><br><span class="line">      title: <span class="string">'Welcom to Flutter'</span>,</span><br><span class="line">      home: <span class="keyword">new</span> Scaffold(</span><br><span class="line">        appBar: <span class="keyword">new</span> AppBar(</span><br><span class="line">          title: <span class="keyword">new</span> Text(<span class="string">'Welcome to Flutter'</span>),</span><br><span class="line">        ),</span><br><span class="line">        body: <span class="keyword">new</span> Center(</span><br><span class="line">          child: <span class="keyword">new</span> Text(<span class="string">'Hello World'</span>),</span><br><span class="line">        ),</span><br><span class="line">      ),</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<a id="more"></a>



<h2 id="MaterialApp"><a href="#MaterialApp" class="headerlink" title="MaterialApp"></a>MaterialApp</h2><p>Material应用程序以<a href="https://docs.flutter.io/flutter/material/MaterialApp-class.html" target="_blank" rel="noopener"><code>MaterialApp</code></a> widget开始， 该widget在应用程序的根部创建了一些有用的widget，其中包括一个<a href="https://docs.flutter.io/flutter/widgets/Navigator-class.html" target="_blank" rel="noopener"><code>Navigator</code></a>， 它管理由字符串标识的Widget栈（即页面路由栈）。<a href="https://docs.flutter.io/flutter/widgets/Navigator-class.html" target="_blank" rel="noopener"><code>Navigator</code></a>可以让您的应用程序在页面之间的平滑的过渡。 是否使用<a href="https://docs.flutter.io/flutter/material/MaterialApp-class.html" target="_blank" rel="noopener"><code>MaterialApp</code></a>完全是可选的，但是使用它是一个很好的做法。</p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 主要属性</span></span><br><span class="line">home  主页</span><br><span class="line">title 标题</span><br><span class="line">color 颜色</span><br><span class="line">theme 主题</span><br><span class="line">routes 路由</span><br><span class="line">。。。</span><br></pre></td></tr></table></figure>



<h2 id="Scaffold"><a href="#Scaffold" class="headerlink" title="Scaffold"></a>Scaffold</h2><p><code>Scaffold</code>是一个路由页的骨架,appBar、drawer、bottomNavigationBar、floatingActionButton</p>
<h2 id="Stateful-widget-amp-Stateless-widget"><a href="#Stateful-widget-amp-Stateless-widget" class="headerlink" title="Stateful widget  &amp;  Stateless widget"></a>Stateful widget  &amp;  Stateless widget</h2><ol>
<li>Stateful widget可以拥有状态，这些状态在widget生命周期中是可以变的，而Stateless widget是不可变的。</li>
<li>Stateful widget至少由两个类组成：<ul>
<li>一个<code>StatefulWidget</code>类。</li>
<li>一个 <code>State</code>类； <code>StatefulWidget</code>类本身是不变的，但是<code>State</code>类中持有的状态在widget生命周期中可能会发生变化。</li>
</ul>
</li>
</ol>
<h2 id="基础组件"><a href="#基础组件" class="headerlink" title="基础组件"></a>基础组件</h2><h3 id="Text"><a href="#Text" class="headerlink" title="Text"></a>Text</h3><table>
<thead>
<tr>
<th>属性名</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>textAlign</td>
<td>TextAlign</td>
<td>center<br />right<br />left<br />justify<br />start<br />end</td>
</tr>
<tr>
<td>maxLines</td>
<td></td>
<td></td>
</tr>
<tr>
<td>overflow</td>
<td>TextOverflow</td>
<td>clip<br />ellipsis<br />fade<br /></td>
</tr>
<tr>
<td>style</td>
<td>TextStyle()</td>
<td>color<br />fontSize<br />height<br />fontFamily<br />background<br />decoration<br />decorationStyle<br />letterSpacing</td>
</tr>
<tr>
<td>textScaleFactor</td>
<td>相对于当前字体大小的缩放因子</td>
<td>1.5等</td>
</tr>
</tbody></table>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">Text(<span class="string">"hello"</span>,</span><br><span class="line">  textAlign: TextAlign.right,</span><br><span class="line">  style: TextStyle(</span><br><span class="line">    color: Colors.blue,</span><br><span class="line">    fontSize: <span class="number">18.0</span>,</span><br><span class="line">    height: <span class="number">1.2</span>,</span><br><span class="line">    background: <span class="keyword">new</span> Paint()..color=Colors.yellow,</span><br><span class="line">    decoration:TextDecoration.underline,</span><br><span class="line">    decorationStyle: TextDecorationStyle.dashed</span><br><span class="line">)</span><br></pre></td></tr></table></figure>



<p>文字还有 TextSpan(<em>Text.rich()</em>)  DefaultTextStyle</p>
<h3 id="按钮"><a href="#按钮" class="headerlink" title="按钮"></a>按钮</h3><p><strong>RaisedButton 漂浮</strong>  <strong>FlatButton 扁平</strong>  <strong>OutlineButton 带边框</strong>  <strong>IconButton 带Icon</strong> </p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">RaisedButton(</span><br><span class="line">  child: Text(<span class="string">"normal"</span>),</span><br><span class="line">  onPressed: () &#123;&#125;,</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line">IconButton(</span><br><span class="line">  icon: Icon(Icons.thumb_up),</span><br><span class="line">  onPressed: () &#123;&#125;,</span><br><span class="line">)</span><br></pre></td></tr></table></figure>



<p>带图标的按钮</p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">RaisedButton.icon(</span><br><span class="line">  icon: Icon(Icons.send),</span><br><span class="line">  label: Text(<span class="string">"发送"</span>),</span><br><span class="line">  onPressed: _onPressed,</span><br><span class="line">),</span><br></pre></td></tr></table></figure>

<p>相关属性</p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> FlatButton(&#123;</span><br><span class="line">  ...  </span><br><span class="line">  <span class="meta">@required</span> <span class="keyword">this</span>.onPressed, <span class="comment">//按钮点击回调</span></span><br><span class="line">  <span class="keyword">this</span>.textColor, <span class="comment">//按钮文字颜色</span></span><br><span class="line">  <span class="keyword">this</span>.disabledTextColor, <span class="comment">//按钮禁用时的文字颜色</span></span><br><span class="line">  <span class="keyword">this</span>.color, <span class="comment">//按钮背景颜色</span></span><br><span class="line">  <span class="keyword">this</span>.disabledColor,<span class="comment">//按钮禁用时的背景颜色</span></span><br><span class="line">  <span class="keyword">this</span>.highlightColor, <span class="comment">//按钮按下时的背景颜色</span></span><br><span class="line">  <span class="keyword">this</span>.splashColor, <span class="comment">//点击时，水波动画中水波的颜色</span></span><br><span class="line">  <span class="keyword">this</span>.colorBrightness,<span class="comment">//按钮主题，默认是浅色主题 </span></span><br><span class="line">  <span class="keyword">this</span>.padding, <span class="comment">//按钮的填充</span></span><br><span class="line">  <span class="keyword">this</span>.shape, <span class="comment">//外形</span></span><br><span class="line">  <span class="meta">@required</span> <span class="keyword">this</span>.child, <span class="comment">//按钮的内容</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>



<h3 id="图片"><a href="#图片" class="headerlink" title="图片"></a>图片</h3><p><strong>本地图片</strong></p>
<ol>
<li><p>在<code>pubspec.yaml</code>中的<code>flutter</code>部分添加如下内容：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">assets:</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">images/avatar.png</span></span><br></pre></td></tr></table></figure>



</li>
</ol>
<ol start="2">
<li><p>加载该图片</p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">Image(</span><br><span class="line">  image: AssetImage(<span class="string">"images/avatar.png"</span>),</span><br><span class="line">  width: <span class="number">100.0</span></span><br><span class="line">);</span><br><span class="line"><span class="comment">// 或</span></span><br><span class="line">Image.asset(<span class="string">"images/avatar.png"</span>,</span><br><span class="line">  width: <span class="number">100.0</span>,</span><br><span class="line">)</span><br></pre></td></tr></table></figure>

</li>
</ol>
<p><strong>网络图片</strong></p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">Image(</span><br><span class="line">  image: NetworkImage(</span><br><span class="line">      <span class="string">"https://avatars2.githubusercontent.com/u/20411648?s=460&amp;v=4"</span>),</span><br><span class="line">  width: <span class="number">100.0</span>,</span><br><span class="line">)</span><br><span class="line"><span class="comment">// 或</span></span><br><span class="line">Image.network(</span><br><span class="line">  <span class="string">"https://avatars2.githubusercontent.com/u/20411648?s=460&amp;v=4"</span>,</span><br><span class="line">  width: <span class="number">100.0</span>,</span><br><span class="line">)</span><br></pre></td></tr></table></figure>

<p><strong>fit</strong>（BoxFit.fill）</p>
<ul>
<li><code>fill</code>：会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形。</li>
<li><code>cover</code>：会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁。</li>
<li><code>contain</code>：这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。</li>
<li><code>fitWidth</code>：图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。</li>
<li><code>fitHeight</code>：图片的高度会缩放到显示空间的高度，宽度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。</li>
<li><code>none</code>：图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片中间部分。</li>
</ul>
<h3 id="单选-多选框"><a href="#单选-多选框" class="headerlink" title="单选/多选框"></a>单选/多选框</h3><figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">Switch(</span><br><span class="line">  value: _switchSelected,<span class="comment">//当前状态</span></span><br><span class="line">  onChanged:(value)&#123;</span><br><span class="line">  <span class="comment">//重新构建页面  </span></span><br><span class="line">    setState(() &#123;</span><br><span class="line">      _switchSelected=value;</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;,</span><br><span class="line">),</span><br><span class="line">Checkbox(</span><br><span class="line">  value: _checkboxSelected,</span><br><span class="line">  activeColor: Colors.red, <span class="comment">//选中时的颜色</span></span><br><span class="line">  onChanged:(value)&#123;</span><br><span class="line">    setState(() &#123;</span><br><span class="line">      _checkboxSelected=value;</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;,</span><br><span class="line">)</span><br></pre></td></tr></table></figure>



<h3 id="输入框-表单"><a href="#输入框-表单" class="headerlink" title="输入框/表单"></a>输入框/表单</h3><figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> TextField(&#123;</span><br><span class="line">  ...</span><br><span class="line">  TextEditingController controller, </span><br><span class="line">  FocusNode focusNode,</span><br><span class="line">  InputDecoration decoration = <span class="keyword">const</span> InputDecoration(),</span><br><span class="line">  TextInputType keyboardType,</span><br><span class="line">  TextInputAction textInputAction,</span><br><span class="line">  TextStyle style,</span><br><span class="line">  TextAlign textAlign = TextAlign.start,</span><br><span class="line">  <span class="built_in">bool</span> autofocus = <span class="keyword">false</span>,</span><br><span class="line">  <span class="built_in">bool</span> obscureText = <span class="keyword">false</span>,</span><br><span class="line">  <span class="built_in">int</span> maxLines = <span class="number">1</span>,</span><br><span class="line">  <span class="built_in">int</span> maxLength,</span><br><span class="line">  <span class="built_in">bool</span> maxLengthEnforced = <span class="keyword">true</span>,</span><br><span class="line">  ValueChanged&lt;<span class="built_in">String</span>&gt; onChanged,</span><br><span class="line">  VoidCallback onEditingComplete,</span><br><span class="line">  ValueChanged&lt;<span class="built_in">String</span>&gt; onSubmitted,</span><br><span class="line">  <span class="built_in">List</span>&lt;TextInputFormatter&gt; inputFormatters,</span><br><span class="line">  <span class="built_in">bool</span> enabled,</span><br><span class="line">  <span class="keyword">this</span>.cursorWidth = <span class="number">2.0</span>,</span><br><span class="line">  <span class="keyword">this</span>.cursorRadius,</span><br><span class="line">  <span class="keyword">this</span>.cursorColor,</span><br><span class="line">  ...</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>获取输入内容</p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//定义一个controller</span></span><br><span class="line">TextEditingController _unameController = TextEditingController();</span><br><span class="line"></span><br><span class="line">TextField(</span><br><span class="line">    autofocus: <span class="keyword">true</span>,</span><br><span class="line">    controller: _unameController, <span class="comment">//设置controller</span></span><br><span class="line">    ...</span><br><span class="line">)</span><br><span class="line"></span><br><span class="line"><span class="built_in">print</span>(_unameController.text)</span><br></pre></td></tr></table></figure>

<p>监听值的变化</p>
<ol>
<li><p>设置<code>onChange</code>回调，如：</p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">TextField(</span><br><span class="line">    autofocus: <span class="keyword">true</span>,</span><br><span class="line">    onChanged: (v) &#123;</span><br><span class="line">      <span class="built_in">print</span>(<span class="string">"onChange: <span class="subst">$v</span>"</span>);</span><br><span class="line">    &#125;</span><br><span class="line">)</span><br></pre></td></tr></table></figure>
</li>
<li><p>通过<code>controller</code>监听，如：</p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">@override</span></span><br><span class="line"><span class="keyword">void</span> initState() &#123;</span><br><span class="line">  <span class="comment">//监听输入改变  </span></span><br><span class="line">  _unameController.addListener(()&#123;</span><br><span class="line">    <span class="built_in">print</span>(_unameController.text);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



</li>
</ol>
<h3 id="进度条"><a href="#进度条" class="headerlink" title="进度条"></a>进度条</h3><p>LinearProgressIndicator  CircularProgressIndicator</p>
<h2 id="容器组件"><a href="#容器组件" class="headerlink" title="容器组件"></a>容器组件</h2><h3 id="Container"><a href="#Container" class="headerlink" title="Container"></a>Container</h3><figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">Container(&#123;</span><br><span class="line">  <span class="keyword">this</span>.alignment,</span><br><span class="line">  <span class="keyword">this</span>.padding, <span class="comment">//容器内补白，属于decoration的装饰范围</span></span><br><span class="line">  Color color, <span class="comment">// 背景色</span></span><br><span class="line">  Decoration decoration, <span class="comment">// 背景装饰</span></span><br><span class="line">  Decoration foregroundDecoration, <span class="comment">//前景装饰</span></span><br><span class="line">  <span class="built_in">double</span> width,<span class="comment">//容器的宽度</span></span><br><span class="line">  <span class="built_in">double</span> height, <span class="comment">//容器的高度</span></span><br><span class="line">  BoxConstraints constraints, <span class="comment">//容器大小的限制条件</span></span><br><span class="line">  <span class="keyword">this</span>.margin,<span class="comment">//容器外补白，不属于decoration的装饰范围</span></span><br><span class="line">  <span class="keyword">this</span>.transform, <span class="comment">//变换</span></span><br><span class="line">  <span class="keyword">this</span>.child,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>



<h3 id="AppBar"><a href="#AppBar" class="headerlink" title="AppBar"></a>AppBar</h3><figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">AppBar(&#123;</span><br><span class="line">  Key key,</span><br><span class="line">  <span class="keyword">this</span>.leading, <span class="comment">//导航栏最左侧Widget，常见为抽屉菜单按钮或返回按钮。</span></span><br><span class="line">  <span class="keyword">this</span>.automaticallyImplyLeading = <span class="keyword">true</span>, <span class="comment">//如果leading为null，是否自动实现默认的leading按钮</span></span><br><span class="line">  <span class="keyword">this</span>.title,<span class="comment">// 页面标题</span></span><br><span class="line">  <span class="keyword">this</span>.actions, <span class="comment">// 导航栏右侧菜单</span></span><br><span class="line">  <span class="keyword">this</span>.bottom, <span class="comment">// 导航栏底部菜单，通常为Tab按钮组</span></span><br><span class="line">  <span class="keyword">this</span>.elevation = <span class="number">4.0</span>, <span class="comment">// 导航栏阴影</span></span><br><span class="line">  <span class="keyword">this</span>.centerTitle, <span class="comment">//标题是否居中 </span></span><br><span class="line">  <span class="keyword">this</span>.backgroundColor,</span><br><span class="line">  ...   <span class="comment">//其它属性见源码注释</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="TabBar"><a href="#TabBar" class="headerlink" title="TabBar"></a>TabBar</h3><figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">_ScaffoldRouteState</span> <span class="keyword">extends</span> <span class="title">State</span>&lt;<span class="title">ScaffoldRoute</span>&gt;</span></span><br><span class="line"><span class="class">    <span class="title">with</span> <span class="title">SingleTickerProviderStateMixin</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">  TabController _tabController; <span class="comment">//需要定义一个Controller</span></span><br><span class="line">  <span class="built_in">List</span> tabs = [<span class="string">"新闻"</span>, <span class="string">"历史"</span>, <span class="string">"图片"</span>];</span><br><span class="line"></span><br><span class="line">  <span class="meta">@override</span></span><br><span class="line">  <span class="keyword">void</span> initState() &#123;</span><br><span class="line">    <span class="keyword">super</span>.initState();</span><br><span class="line">    <span class="comment">// 创建Controller  </span></span><br><span class="line">    _tabController = TabController(length: tabs.length, vsync: <span class="keyword">this</span>);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="meta">@override</span></span><br><span class="line">  Widget build(BuildContext context) &#123;</span><br><span class="line">    <span class="keyword">return</span> Scaffold(</span><br><span class="line">      appBar: AppBar(</span><br><span class="line">        ... <span class="comment">//省略无关代码</span></span><br><span class="line">        bottom: TabBar(   <span class="comment">//生成Tab菜单</span></span><br><span class="line">          controller: _tabController,</span><br><span class="line">          tabs: tabs.map((e) =&gt; Tab(text: e)).toList()</span><br><span class="line">        ),</span><br><span class="line">        body: TabBarView(</span><br><span class="line">        controller: _tabController,</span><br><span class="line">        children: tabs.map((e) &#123; <span class="comment">//创建3个Tab页</span></span><br><span class="line">          <span class="keyword">return</span> Container(</span><br><span class="line">            alignment: Alignment.center,</span><br><span class="line">            child: Text(e, textScaleFactor: <span class="number">5</span>),</span><br><span class="line">          );</span><br><span class="line">        &#125;).toList(),</span><br><span class="line">      ),</span><br><span class="line">      ... <span class="comment">//省略无关代码</span></span><br><span class="line"></span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<p>抽屉菜单Drawer  FloatingActionButton bottomNavigationBar略</p>
<h3 id="Padding"><a href="#Padding" class="headerlink" title="Padding"></a>Padding</h3><figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">Padding(&#123;</span><br><span class="line">  ...</span><br><span class="line">  EdgeInsetsGeometry padding,</span><br><span class="line">  Widget child,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<ul>
<li><code>fromLTRB(double left, double top, double right, double bottom)</code>：分别指定四个方向的填充。</li>
<li><code>all(double value)</code> : 所有方向均使用相同数值的填充。</li>
<li><code>only({left, top, right ,bottom })</code>：可以设置具体某个方向的填充(可以同时指定多个方向)。</li>
<li><code>symmetric({ vertical, horizontal })</code>：用于设置对称方向的填充，<code>vertical</code>指<code>top</code>和<code>bottom</code>，<code>horizontal</code>指<code>left</code>和<code>right</code>。</li>
</ul>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">Padding(</span><br><span class="line">  <span class="comment">//左边添加8像素补白</span></span><br><span class="line">  padding: <span class="keyword">const</span> EdgeInsets.all(<span class="number">8.0</span>),</span><br><span class="line">  child: Text(<span class="string">"Hello world"</span>),</span><br><span class="line">)</span><br><span class="line">  </span><br><span class="line"><span class="keyword">const</span> EdgeInsets.fromLTRB(<span class="number">1.0</span>, <span class="number">2.0</span>, <span class="number">3.0</span>, <span class="number">4.0</span>)</span><br><span class="line"><span class="keyword">const</span> EdgeInsets.only(&#123;left: <span class="number">2.0</span>&#125;)</span><br><span class="line"><span class="keyword">const</span> EdgeInsets.symmetric(&#123;<span class="number">1.0</span>, <span class="number">2.0</span>&#125;)</span><br></pre></td></tr></table></figure>



<h3 id="尺寸限制类容器（ConstrainedBox-SizedBox…）"><a href="#尺寸限制类容器（ConstrainedBox-SizedBox…）" class="headerlink" title="尺寸限制类容器（ConstrainedBox/SizedBox…）"></a>尺寸限制类容器（ConstrainedBox/SizedBox…）</h3><p><strong>ConstrainedBox</strong></p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">ConstrainedBox(</span><br><span class="line">  constraints: BoxConstraints(</span><br><span class="line">    minWidth: <span class="built_in">double</span>.infinity, <span class="comment">//宽度尽可能大</span></span><br><span class="line">    minHeight: <span class="number">50.0</span> <span class="comment">//最小高度为50像素</span></span><br><span class="line">  ),</span><br><span class="line">  child: Container(</span><br><span class="line">      height: <span class="number">5.0</span>, </span><br><span class="line">      child: redBox </span><br><span class="line">  ),</span><br><span class="line">)</span><br></pre></td></tr></table></figure>

<p>BoxConstraints用于设置限制条件，它的定义如下：</p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> BoxConstraints(&#123;</span><br><span class="line">  <span class="keyword">this</span>.minWidth = <span class="number">0.0</span>, <span class="comment">//最小宽度</span></span><br><span class="line">  <span class="keyword">this</span>.maxWidth = <span class="built_in">double</span>.infinity, <span class="comment">//最大宽度</span></span><br><span class="line">  <span class="keyword">this</span>.minHeight = <span class="number">0.0</span>, <span class="comment">//最小高度</span></span><br><span class="line">  <span class="keyword">this</span>.maxHeight = <span class="built_in">double</span>.infinity <span class="comment">//最大高度</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p><strong>SizedBox</strong></p>
<p><code>SizedBox</code>用于给子元素指定固定的宽高，如：</p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">SizedBox(</span><br><span class="line">  width: <span class="number">80.0</span>,</span><br><span class="line">  height: <span class="number">80.0</span>,</span><br><span class="line">  child: redBox</span><br><span class="line">)</span><br></pre></td></tr></table></figure>

<p>UnconstrainedBox 不会对子组件产生任何限制</p>
<p>AspectRatio 指定子组件的长宽比</p>
<p>LimitedBox 指定最大宽高</p>
<p>FractionallySizedBox  根据父容器宽高的百分比来设置子组件宽高</p>
<h3 id="装饰容器（DecoratedBox）"><a href="#装饰容器（DecoratedBox）" class="headerlink" title="装饰容器（DecoratedBox）"></a>装饰容器（DecoratedBox）</h3><figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> DecoratedBox(&#123;</span><br><span class="line">  Decoration decoration,</span><br><span class="line">  DecorationPosition position = DecorationPosition.background,</span><br><span class="line">  Widget child</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p><strong>BoxDecoration</strong></p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">BoxDecoration(&#123;</span><br><span class="line">  Color color, <span class="comment">//颜色</span></span><br><span class="line">  DecorationImage image,<span class="comment">//图片</span></span><br><span class="line">  BoxBorder border, <span class="comment">//边框</span></span><br><span class="line">  BorderRadiusGeometry borderRadius, <span class="comment">//圆角</span></span><br><span class="line">  <span class="built_in">List</span>&lt;BoxShadow&gt; boxShadow, <span class="comment">//阴影,可以指定多个</span></span><br><span class="line">  Gradient gradient, <span class="comment">//渐变</span></span><br><span class="line">  BlendMode backgroundBlendMode, <span class="comment">//背景混合模式</span></span><br><span class="line">  BoxShape shape = BoxShape.rectangle, <span class="comment">//形状</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"> DecoratedBox(</span><br><span class="line">    decoration: BoxDecoration(</span><br><span class="line">      gradient: LinearGradient(colors:[Colors.red,Colors.orange[<span class="number">700</span>]]), <span class="comment">//背景渐变</span></span><br><span class="line">      border: Border.all(width: <span class="number">2.0</span>, color:Colors.red),</span><br><span class="line">      borderRadius: BorderRadius.circular(<span class="number">3.0</span>), <span class="comment">//3像素圆角</span></span><br><span class="line">      boxShadow: [ <span class="comment">//阴影</span></span><br><span class="line">        BoxShadow(</span><br><span class="line">            color:Colors.black54,</span><br><span class="line">            offset: Offset(<span class="number">2.0</span>,<span class="number">2.0</span>),</span><br><span class="line">            blurRadius: <span class="number">4.0</span></span><br><span class="line">        )</span><br><span class="line">      ]</span><br><span class="line">    ),</span><br><span class="line">  child: Padding(padding: EdgeInsets.symmetric(horizontal: <span class="number">80.0</span>, vertical: <span class="number">18.0</span>),</span><br><span class="line">    child: Text(<span class="string">"Login"</span>, style: TextStyle(color: Colors.white),),</span><br><span class="line">  )</span><br><span class="line">)</span><br></pre></td></tr></table></figure>





<h3 id="剪切（Clip）"><a href="#剪切（Clip）" class="headerlink" title="剪切（Clip）"></a>剪切（Clip）</h3><table>
<thead>
<tr>
<th>剪裁Widget</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td>ClipOval</td>
<td>子组件为正方形时剪裁为内贴圆形，为矩形时，剪裁为内贴椭圆</td>
</tr>
<tr>
<td>ClipRRect</td>
<td>将子组件剪裁为圆角矩形</td>
</tr>
<tr>
<td>ClipRect</td>
<td>剪裁子组件到实际占用的矩形大小（溢出部分剪裁）</td>
</tr>
</tbody></table>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">ClipOval(child: avatar), &#x2F;&#x2F;剪裁为圆形</span><br><span class="line">ClipRRect( &#x2F;&#x2F;剪裁为圆角矩形</span><br><span class="line">  borderRadius: BorderRadius.circular(5.0),</span><br><span class="line">  child: avatar,</span><br><span class="line">),</span><br></pre></td></tr></table></figure>





<h3 id="Transform-变换"><a href="#Transform-变换" class="headerlink" title="Transform 变换"></a>Transform 变换</h3><p>略</p>
<h2 id="布局组件"><a href="#布局组件" class="headerlink" title="布局组件"></a>布局组件</h2><h3 id="线性布局Row-Column"><a href="#线性布局Row-Column" class="headerlink" title="线性布局Row/Column"></a>线性布局Row/Column</h3><figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">Row(&#123;</span><br><span class="line">  ...  </span><br><span class="line">  TextDirection textDirection,    </span><br><span class="line">  MainAxisSize mainAxisSize = MainAxisSize.max,    </span><br><span class="line">  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,</span><br><span class="line">  VerticalDirection verticalDirection = VerticalDirection.down,  </span><br><span class="line">  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,</span><br><span class="line">  <span class="built_in">List</span>&lt;Widget&gt; children = <span class="keyword">const</span> &lt;Widget&gt;[],</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>



<ul>
<li><code>textDirection</code>：表示水平方向子组件的布局顺序(是从左往右还是从右往左)，默认为系统当前Locale环境的文本方向(如中文、英语都是从左往右，而阿拉伯语是从右往左)。</li>
<li><code>mainAxisSize</code>：表示<code>Row</code>在主轴(水平)方向占用的空间，默认是<code>MainAxisSize.max</code>，表示尽可能多的占用水平方向的空间，此时无论子widgets实际占用多少水平空间，<code>Row</code>的宽度始终等于水平方向的最大宽度；而<code>MainAxisSize.min</code>表示尽可能少的占用水平空间，当子组件没有占满水平剩余空间，则<code>Row</code>的实际宽度等于所有子组件占用的的水平空间；</li>
<li><code>mainAxisAlignment</code>：表示子组件在<code>Row</code>所占用的水平空间内对齐方式，如果<code>mainAxisSize</code>值为<code>MainAxisSize.min</code>，则此属性无意义，因为子组件的宽度等于<code>Row</code>的宽度。只有当<code>mainAxisSize</code>的值为<code>MainAxisSize.max</code>时，此属性才有意义，<code>MainAxisAlignment.start</code>表示沿<code>textDirection</code>的初始方向对齐，如<code>textDirection</code>取值为<code>TextDirection.ltr</code>时，则<code>MainAxisAlignment.start</code>表示左对齐，<code>textDirection</code>取值为<code>TextDirection.rtl</code>时表示从右对齐。而<code>MainAxisAlignment.end</code>和<code>MainAxisAlignment.start</code>正好相反；<code>MainAxisAlignment.center</code>表示居中对齐。读者可以这么理解：<code>textDirection</code>是<code>mainAxisAlignment</code>的参考系。</li>
<li><code>verticalDirection</code>：表示<code>Row</code>纵轴（垂直）的对齐方向，默认是<code>VerticalDirection.down</code>，表示从上到下。</li>
<li><code>crossAxisAlignment</code>：表示子组件在纵轴方向的对齐方式，<code>Row</code>的高度等于子组件中最高的子元素高度，它的取值和<code>MainAxisAlignment</code>一样(包含<code>start</code>、<code>end</code>、 <code>center</code>三个值)，不同的是<code>crossAxisAlignment</code>的参考系是<code>verticalDirection</code>，即<code>verticalDirection</code>值为<code>VerticalDirection.down</code>时<code>crossAxisAlignment.start</code>指顶部对齐，<code>verticalDirection</code>值为<code>VerticalDirection.up</code>时，<code>crossAxisAlignment.start</code>指底部对齐；而<code>crossAxisAlignment.end</code>和<code>crossAxisAlignment.start</code>正好相反；</li>
<li><code>children</code> ：子组件数组</li>
</ul>
<p>Column与Row参数相同</p>
<p>⚠️如果<code>Row</code>里面嵌套<code>Row</code>，或者<code>Column</code>里面再嵌套<code>Column</code>，那么只有最外面的<code>Row</code>或<code>Column</code>会占用尽可能大的空间，里面<code>Row</code>或<code>Column</code>所占用的空间为实际大小。</p>
<p>如果要让里面的<code>Column</code>占满外部<code>Column</code>，可以使用<code>Expanded</code> 组件</p>
<h3 id="Flex"><a href="#Flex" class="headerlink" title="Flex"></a>Flex</h3><figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">Flex(&#123;</span><br><span class="line">  ...</span><br><span class="line">  <span class="meta">@required</span> <span class="keyword">this</span>.direction, <span class="comment">//弹性布局的方向, Row默认为水平方向，Column默认为垂直方向</span></span><br><span class="line">  <span class="built_in">List</span>&lt;Widget&gt; children = <span class="keyword">const</span> &lt;Widget&gt;[],</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>Expanded可实现比例分配</p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//Flex的两个子widget按1：2来占据水平空间  </span></span><br><span class="line">Flex(</span><br><span class="line">  direction: Axis.horizontal,</span><br><span class="line">  children: &lt;Widget&gt;[</span><br><span class="line">    Expanded(</span><br><span class="line">      flex: <span class="number">1</span>,</span><br><span class="line">      child: Container(</span><br><span class="line">        height: <span class="number">30.0</span>,</span><br><span class="line">        color: Colors.red,</span><br><span class="line">      ),</span><br><span class="line">    ),</span><br><span class="line">    Expanded(</span><br><span class="line">      flex: <span class="number">2</span>,</span><br><span class="line">      child: Container(</span><br><span class="line">        height: <span class="number">30.0</span>,</span><br><span class="line">        color: Colors.green,</span><br><span class="line">      ),</span><br><span class="line">    ),</span><br><span class="line">  ],</span><br><span class="line">),</span><br></pre></td></tr></table></figure>



<h3 id="流式布局"><a href="#流式布局" class="headerlink" title="流式布局"></a>流式布局</h3><figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">Wrap(&#123;</span><br><span class="line">  ...</span><br><span class="line">  <span class="keyword">this</span>.direction = Axis.horizontal,</span><br><span class="line">  <span class="keyword">this</span>.alignment = WrapAlignment.start,</span><br><span class="line">  <span class="keyword">this</span>.spacing = <span class="number">0.0</span>,  <span class="comment">// 主轴方向子widget的间距</span></span><br><span class="line">  <span class="keyword">this</span>.runAlignment = WrapAlignment.start,  <span class="comment">//  纵轴方向的对齐方式</span></span><br><span class="line">  <span class="keyword">this</span>.runSpacing = <span class="number">0.0</span>,  <span class="comment">// 纵轴方向的间距</span></span><br><span class="line">  <span class="keyword">this</span>.crossAxisAlignment = WrapCrossAlignment.start,</span><br><span class="line">  <span class="keyword">this</span>.textDirection,</span><br><span class="line">  <span class="keyword">this</span>.verticalDirection = VerticalDirection.down,</span><br><span class="line">  <span class="built_in">List</span>&lt;Widget&gt; children = <span class="keyword">const</span> &lt;Widget&gt;[],</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p><img src="https://raw.githubusercontent.com/itxing666/blogImgs/main/img/207.png" alt="207"></p>
<p>Flow组件 略</p>
<h3 id="层叠布局（Stack-Position）"><a href="#层叠布局（Stack-Position）" class="headerlink" title="层叠布局（Stack/Position）"></a>层叠布局（Stack/Position）</h3><p><code>Stack</code>允许子组件堆叠，而<code>Positioned</code>用于根据<code>Stack</code>的四个角来确定子组件的位置</p>
<p><strong>Stack</strong></p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">Stack(&#123;</span><br><span class="line">  <span class="keyword">this</span>.alignment = AlignmentDirectional.topStart,</span><br><span class="line">  <span class="keyword">this</span>.textDirection,</span><br><span class="line">  <span class="keyword">this</span>.fit = StackFit.loose,</span><br><span class="line">  <span class="keyword">this</span>.overflow = Overflow.clip,</span><br><span class="line">  <span class="built_in">List</span>&lt;Widget&gt; children = <span class="keyword">const</span> &lt;Widget&gt;[],</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>



<p><strong>positioned</strong></p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> Positioned(&#123;</span><br><span class="line">  Key key,</span><br><span class="line">  <span class="keyword">this</span>.left, </span><br><span class="line">  <span class="keyword">this</span>.top,</span><br><span class="line">  <span class="keyword">this</span>.right,</span><br><span class="line">  <span class="keyword">this</span>.bottom,</span><br><span class="line">  <span class="keyword">this</span>.width,</span><br><span class="line">  <span class="keyword">this</span>.height,</span><br><span class="line">  <span class="meta">@required</span> Widget child,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//通过ConstrainedBox来确保Stack占满屏幕</span></span><br><span class="line">ConstrainedBox(</span><br><span class="line">  constraints: BoxConstraints.expand(),</span><br><span class="line">  child: Stack(</span><br><span class="line">    alignment:Alignment.center , <span class="comment">//指定未定位或部分定位widget的对齐方式</span></span><br><span class="line">    children: &lt;Widget&gt;[</span><br><span class="line">      Container(child: Text(<span class="string">"Hello world"</span>,style: TextStyle(color: Colors.white)),</span><br><span class="line">        color: Colors.red,</span><br><span class="line">      ),</span><br><span class="line">      Positioned(</span><br><span class="line">        left: <span class="number">18.0</span>,</span><br><span class="line">        child: Text(<span class="string">"I am Jack"</span>),</span><br><span class="line">      ),</span><br><span class="line">      Positioned(</span><br><span class="line">        top: <span class="number">18.0</span>,</span><br><span class="line">        child: Text(<span class="string">"Your friend"</span>),</span><br><span class="line">      )        </span><br><span class="line">    ],</span><br><span class="line">  ),</span><br><span class="line">);</span><br></pre></td></tr></table></figure>



<p><img src="https://raw.githubusercontent.com/itxing666/blogImgs/main/img/208.png" alt="208"></p>
<h3 id="对齐与相对定位（Align）"><a href="#对齐与相对定位（Align）" class="headerlink" title="对齐与相对定位（Align）"></a>对齐与相对定位（Align）</h3><figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">Align(&#123;</span><br><span class="line">  Key key,</span><br><span class="line">  <span class="keyword">this</span>.alignment = Alignment.center,</span><br><span class="line">  <span class="keyword">this</span>.widthFactor,</span><br><span class="line">  <span class="keyword">this</span>.heightFactor,</span><br><span class="line">  Widget child,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>



<p>Center 组件继承Align, alignment<code>值为</code>Alignment.center</p>
<h2 id="滚动组件"><a href="#滚动组件" class="headerlink" title="滚动组件"></a>滚动组件</h2><h3 id="ListView"><a href="#ListView" class="headerlink" title="ListView"></a>ListView</h3><figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">ListView(&#123;</span><br><span class="line">  ...  </span><br><span class="line">  <span class="comment">//可滚动widget公共参数</span></span><br><span class="line">  Axis scrollDirection = Axis.vertical,</span><br><span class="line">  <span class="built_in">bool</span> reverse = <span class="keyword">false</span>,</span><br><span class="line">  ScrollController controller,</span><br><span class="line">  <span class="built_in">bool</span> primary,</span><br><span class="line">  ScrollPhysics physics,</span><br><span class="line">  EdgeInsetsGeometry padding,</span><br><span class="line"></span><br><span class="line">  <span class="comment">//ListView各个构造函数的共同参数  </span></span><br><span class="line">  <span class="built_in">double</span> itemExtent,</span><br><span class="line">  <span class="built_in">bool</span> shrinkWrap = <span class="keyword">false</span>,</span><br><span class="line">  <span class="built_in">bool</span> addAutomaticKeepAlives = <span class="keyword">true</span>,</span><br><span class="line">  <span class="built_in">bool</span> addRepaintBoundaries = <span class="keyword">true</span>,</span><br><span class="line">  <span class="built_in">double</span> cacheExtent,</span><br><span class="line"></span><br><span class="line">  <span class="comment">//子widget列表</span></span><br><span class="line">  <span class="built_in">List</span>&lt;Widget&gt; children = <span class="keyword">const</span> &lt;Widget&gt;[],</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p><strong>ListView.builder</strong></p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">child: ListView.builder(</span><br><span class="line">  itemCount: data.length,</span><br><span class="line">  itemBuilder: (context, index) &#123;</span><br><span class="line">    _buildListItem(data.[index]);</span><br><span class="line">  &#125;,</span><br><span class="line">),</span><br></pre></td></tr></table></figure>



<h3 id="GridView"><a href="#GridView" class="headerlink" title="GridView"></a>GridView</h3><figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">GridView(&#123;</span><br><span class="line">  Axis scrollDirection = Axis.vertical,</span><br><span class="line">  <span class="built_in">bool</span> reverse = <span class="keyword">false</span>,</span><br><span class="line">  ScrollController controller,</span><br><span class="line">  <span class="built_in">bool</span> primary,</span><br><span class="line">  ScrollPhysics physics,</span><br><span class="line">  <span class="built_in">bool</span> shrinkWrap = <span class="keyword">false</span>,</span><br><span class="line">  EdgeInsetsGeometry padding,</span><br><span class="line">  <span class="meta">@required</span> SliverGridDelegate gridDelegate, <span class="comment">//控制子widget layout的委托</span></span><br><span class="line">  <span class="built_in">bool</span> addAutomaticKeepAlives = <span class="keyword">true</span>,</span><br><span class="line">  <span class="built_in">bool</span> addRepaintBoundaries = <span class="keyword">true</span>,</span><br><span class="line">  <span class="built_in">double</span> cacheExtent,</span><br><span class="line">  <span class="built_in">List</span>&lt;Widget&gt; children = <span class="keyword">const</span> &lt;Widget&gt;[],</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>SliverGridDelegateWithFixedCrossAxisCount</strong></p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">SliverGridDelegateWithFixedCrossAxisCount(&#123;</span><br><span class="line">  <span class="meta">@required</span> <span class="built_in">double</span> crossAxisCount, </span><br><span class="line">  <span class="built_in">double</span> mainAxisSpacing = <span class="number">0.0</span>,</span><br><span class="line">  <span class="built_in">double</span> crossAxisSpacing = <span class="number">0.0</span>,</span><br><span class="line">  <span class="built_in">double</span> childAspectRatio = <span class="number">1.0</span>,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">GridView.count( </span><br><span class="line">  crossAxisCount: <span class="number">3</span>,</span><br><span class="line">  childAspectRatio: <span class="number">1.0</span>,</span><br><span class="line">  children: &lt;Widget&gt;[</span><br><span class="line">    Icon(Icons.ac_unit),</span><br><span class="line">    Icon(Icons.airport_shuttle),</span><br><span class="line">    Icon(Icons.all_inclusive),</span><br><span class="line">    Icon(Icons.beach_access),</span><br><span class="line">    Icon(Icons.cake),</span><br><span class="line">    Icon(Icons.free_breakfast),</span><br><span class="line">  ],</span><br><span class="line">);</span><br></pre></td></tr></table></figure>



<p><strong>SliverGridDelegateWithMaxCrossAxisExtent</strong></p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">SliverGridDelegateWithMaxCrossAxisExtent(&#123;</span><br><span class="line">  <span class="built_in">double</span> maxCrossAxisExtent,  <span class="comment">// 子元素在横轴上的最大长度</span></span><br><span class="line">  <span class="built_in">double</span> mainAxisSpacing = <span class="number">0.0</span>,</span><br><span class="line">  <span class="built_in">double</span> crossAxisSpacing = <span class="number">0.0</span>,</span><br><span class="line">  <span class="built_in">double</span> childAspectRatio = <span class="number">1.0</span>,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">GridView.extent(</span><br><span class="line">   maxCrossAxisExtent: <span class="number">120.0</span>,</span><br><span class="line">   childAspectRatio: <span class="number">2.0</span>,</span><br><span class="line">   children: &lt;Widget&gt;[</span><br><span class="line">     Icon(Icons.ac_unit),</span><br><span class="line">     Icon(Icons.airport_shuttle),</span><br><span class="line">     Icon(Icons.all_inclusive),</span><br><span class="line">     Icon(Icons.beach_access),</span><br><span class="line">     Icon(Icons.cake),</span><br><span class="line">     Icon(Icons.free_breakfast),</span><br><span class="line">   ],</span><br><span class="line"> );</span><br></pre></td></tr></table></figure>



<h2 id="关注公众号：-页面仔小杨-【实战干货、原创分享】"><a href="#关注公众号：-页面仔小杨-【实战干货、原创分享】" class="headerlink" title="关注公众号： 页面仔小杨 【实战干货、原创分享】"></a>关注公众号： 页面仔小杨 【实战干货、原创分享】</h2><p><img src="https://raw.githubusercontent.com/itxing666/blogImgs/main/img/bottom.png" alt="bottom"></p>
</div></article></div><div class="right-container"><div class="widget"><div id="arAnchorBar"></div></div></div></section></div><div class="right-menu"></div><div class="modal search-modal"><div class="input-field"><input type="text" id="search_input"><label for="search-input">搜索</label></div><div id="search_result" class="search-result"></div></div><div class="blog-overlay"></div><footer class="row"><div class="footer-con"><div class="paginator"><a href="/2021/01/21/Flutter/Flutter%E8%BF%9B%E9%98%B6/" title="Flutter进阶" class="prev">PREV</a><a href="/2021/01/18/Java/Java%E5%9F%BA%E7%A1%80/" title="Java基础" class="next">NEXT</a></div><a href="#comment" class="comment-anchor"></a><div id="vcomments"></div><script>new Valine({
    el: "#vcomments",
    appId: "fTqcCRR2oHhKQGgjSy86Ifkf-gzGzoHsz",
    appKey: "r1WK7286QLlfxnpbWsjs06xH",
    notify: false,
    verify: false,
    avatar: "robohash",
    visitor: true,
    placeholder: "随便说点什么～.～",
});</script><div class="copyright"><p>Copyright © 2016 - 2022  <a target="_blank">页面仔小杨</a> 版权所有【实战干货、原创分享】 <br></p><p> <span style="padding-right: 6px;">关注公众号：页面仔小杨</span></p></div><div class="totop"><i></i></div></div></footer><script async src="https://cdn.bootcss.com/mathjax/2.6.1/MathJax.js?config=TeX-MML-AM_CHTML"></script><script src="/scripts/jquery-1.8.2.min.js"></script><script src="/scripts/ar-anchor.js"></script><script src="/scripts/main.js"></script><script>(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;e=o.createElement(i);r=o.getElementsByTagName(i)[0];e.src='//www.google-analytics.com/analytics.js';r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));ga('create',"UA-65933410-1",'auto');ga('send','pageview');</script></body></html>